<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 车载BOX使用 </view>
      </template>
    </FilterNavbar>
    <view class="manager-search">
      <ve-search-bar :showBorder="true" placeholder="请输入车牌号" @search="searchBarSearch" />
    </view>
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in dataSource" :key="item">
          <ManagerItem :manager-item="item" :resetRefresh="resetRefresh" />
        </block>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      <!-- loading组件 -->
      <ve-toast ref="toastRef" />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import FilterNavbar from '@/components/FilterNavbar'
  import ManagerItem from './components/manager-item.vue'
  import { carCommandTbox } from '@/api/asset/car-virtual'
  import { computed, ref } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import { onLoad } from '@dcloudio/uni-app'

  // 只有当设备状态是在线、不在线时，允许点击这些按钮；设备状态是未知的时候，设备仅能查看操作记录
  const operatesList = [
    {
      // 开门并供电
      label: 'openAndPowerFn',
      loadingTxt: '正在开门供电',
      value: 5,
    },
    {
      // 锁门并断电
      label: 'lockAndPowerOffFn',
      loadingTxt: '正在锁门断电',
      value: 6,
    },
    {
      // 鸣笛寻车
      label: 'whistleFn',
      loadingTxt: '正在鸣笛寻车',
      value: 7,
    },
    {
      // 开门
      label: 'openFn',
      loadingTxt: '正在开门',
      value: 1,
    },
    {
      // 锁门
      label: 'lockFn',
      loadingTxt: '正在锁门',
      value: 2,
    },
    {
      // 供电
      label: 'powerSupplyFn',
      loadingTxt: '正在供电',
      value: 3,
    },
    {
      // 断电
      label: 'outageFn',
      loadingTxt: '正在断电',
      value: 4,
    },
  ]
  const toastRef = ref()
  operatesList.map((item) => {
    uni.$on(item.label, function (id) {
      toastRef.value && toastRef.value.showLoading({ title: item.loadingTxt })
      carCommandTbox({ id, command: item.value })
        .then(() => {
          uni.showToast({
            icon: 'none',
            title: '操作成功',
          })
        })
        .finally(() => {
          toastRef.value.hideLoading()
        })
    })
  })

  const queryParam = ref<any>({
    licenseNoLike: undefined,
    vinLike: undefined,
    vehicleFirm: undefined,
    vehicleSnLike: undefined,
    vehicleCodeLike: undefined,
    vehicleStatus: undefined,
    pageNumber: 1,
    carIdIsNull: 0,
  })

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/carTboxVehicle/pageList',
    queryParam,
  )

  const dict = usePageDict('carTboxVehicle')
  const searchList = computed(() => {
    return [
      {
        prop: 'vehicleFirm',
        label: '设备供应商',
        type: 'picker',
        attrs: {
          options: dict.vehicleFirmEnums,
        },
      },
      {
        prop: 'vehicleStatus',
        label: '设备状态',
        type: 'picker',
        attrs: {
          // 过滤掉未安装选项
          options: dict.vehicleStatusEnums ? dict.vehicleStatusEnums.filter((it) => it.value != 0) : [],
        },
      },
    ]
  })

  const searchBarSearch = (val: any) => {
    queryParam.value.licenseNoLike = val
    resetRefresh()
  }

  const onFilterNavbarConfirm = (params: any) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
  }

  onLoad(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }
  .navbar-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #1d2129;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
  .manager-search {
    position: sticky;
    top: 44px;
  }
</style>
